<template>
    <div class="star-group" :style="color?'color:'+color:'color:#F23D3D'">
        <span class="iconfont icon-xingxing-shi star" v-for="item in scoreInt"></span>
        <span class="iconfont icon-bankexing star" v-show="scoreFloat!==0"></span>
        <span class="iconfont icon-xingxing-kong star" v-for="item in (5-scoreInt-scoreFloat)"></span>
        <span>{{score/2}}</span>
    </div>
</template>
<script>
export default {
    name:"Star",
    props:["score","color"],
    data() {
        return {
            scoreInt:0,
            scoreFloat:0
        }
    },
    updated(){
        this.star()
    },
    created(){
        this.star()
    },
    methods:{
        star(){
            console.log(this.score%2)
            this.scoreInt = parseInt(this.score/2)
            this.scoreFloat = this.score%2
        }
    }
}
</script>
<style scoped>
    
    .star{
        font-size: 1rem;
    }
    .sales{
        color: #888;
        font-size: 0.8rem;
        padding-left: 0.4rem;
    }
</style>